<template>
  <div>
    <n-data-table class="s-table" :columns="columns" :data="data" :pagination="data.length > 0 ? paginations: false" :bordered="false" :loading="loading" />
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive} from 'vue';
import { useMessage } from 'naive-ui';
import { useRoute } from 'vue-router';
import { ptVarListGets } from '@/api/GlobalVarMgt/GlobalVarMgt';

const message = useMessage();
const emits = defineEmits(['send']);

// table列表加载
let loading = ref(false);
// 标头数据
const columns = [
  {
    title: '序号',
    key: 'index',
  },
  {
    title: '设备名称',
    key: 'device_name',
  },
  {
    title: '所属主机',
    key: 'host_name',
  },
  {
    title: '测点名称',
    key: 'point_name',
  },
  {
    title: '测点变量名称',
    key: 'point_var_name',
  },
];

// 组件参数
const props = defineProps({
  pageParam: {
    type: Object,
    required: true,
  },
});

// 获取当前路由
const route = useRoute();
// 从路由参数中获取 id
const pageId = route.query.id;
console.log('id', pageId);

// 新增
const add = (row) => {
  // 发送新增消息
  emits('send', 'openAddForm');
};

// 编辑
const edit = (row) => {
  // 发送编辑消息
  emits('send', 'openEditForm', row);
};

// 刷新数据回调用方法
function refresh(params) {
  // 判断params是否传递参数，传递参数需要保存，防止翻页丢失搜索条件
  if (params) {
    Object.assign(searchParams, params);
  }
  search(); // 重新获取列表数据
}

// 列表数据
const data = ref([
  // {index: 1}
]);

const paginations = reactive({
  page: 1,
  pageSize: 14,
  onChange: (page) => {
    paginations.page = page
    search();
  },
});
const total = ref(0);

// 保存搜索参数
const searchParams = reactive({});

// 列表获取数据
const search = async () => {
  const params = { ...paginations };
  loading.value = true;
  const res = await ptVarListGets(params);
  loading.value = false;
  if(res.code === 200) {
    data.value = res.data;
    total.value = res.total;
    return
  }
  message.error(res.msg);
};
// 初始化
function init() {
  search();
}

// 表格需要暴露出init、refresh方法
defineExpose({
  init,
  refresh,
});
</script>

<style lang="less" scoped>
::v-deep .s-table .n-data-table-tr .n-data-table-th{
  border: none;
  background: #0E1E2E;
}
::v-deep .s-table .n-data-table-tr:nth-child(odd) .n-data-table-td{
  background: #182e46;
  color: #fff;
}

::v-deep .s-table .n-data-table-tr:nth-child(even) .n-data-table-td{
  background: #0E1E2E;
  color: #fff;
}
::v-deep .s-table .n-data-table .n-data-table-tr:hover{
  background-color: #1075C4 !important;
}

::v-deep .s-table .n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td{
  background-color: #1075C4 !important;
}
::v-deep .s-table .n-data-table .n-data-table-td{
  border-bottom: none !important;
}
</style>
